<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景</title>
		<style>
			bod y{
				width: 100%;
				height: 1000000px;
				background-image: url(img/熊大 熊二 开心 熊 动物 动画片 动漫 熊出没_爱给网_aigei_com.png);
				background-size: contain;
				/* 函数cover等比例放大图片  特点：图片按照比例放大存背景空间
				【开发者：背景图大小是否等于背景空间】
				    contain等比例缩小图片  特点：图片按照比例缩放存背景空间
					【开发者：背景图等比例显示背景空间】
				 */
				/* 背景附件--尺寸中存在cover或者contain */
				background-attachment:fixed;/*背景图固定    scoll 不固定*/
			}
			div{
				width: 300px;
                height: 300px;
				background-color: #e4393c;
				background: #ffff00;
				background-image: url(img/熊大 熊二 开心 熊 动物 动画片 动漫 熊出没_爱给网_aigei_com.png);
				/* 问题:超大图-不显示  小图：显示
				 注意：北京空间大小，如果小于背景空间--平铺
				 */
				background-repeat:no-repeat;/* no-repeat不平铺  repeat-x，y 横，纵向平铺*/
				background-size: 30%;
				/* 背景尺寸属性：数值px%|函数 cover contain */
				/* 背景的定位：前提背景空间大于背景图  关键字：center，left，right，top，bottom*/
				background-position:80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam dignissimos odio aperiam cumque ratione, quam quo minima voluptatum perspiciatis eaque, eligendi commodi ipsum facilis saepe recusandae autem. Nobis, autem quas?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, ea dolores dolore eum exercitationem similique numquam repudiandae, et excepturi sed beatae. Illo mollitia nam eveniet ea necessitatibus tempora perferendis nostrum!
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium cumque laboriosam fugit aspernatur veritatis fuga blanditiis? Rem possimus atque quos unde, fugiat ipsa et? Neque deleniti non assumenda ipsum nisi?
		<!-- html img图片  引入一张图片，位置不可以随意改变
		     css  背景图片  引入一张图片，位置可以随便改变
			 子属性background-color 背景颜色
			      background-image 背景图
				  background-repeat 背景重复
				  background-size背景尺寸
				  background-attachment 背景附件
				  background-position   背景定位
				
			 复合属性：background :background-image  background-color background-position
			  background-size  background-repeat和background-attachment
			